<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资料管理</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
    <link href="../layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
</head>
<body>
<div class="activity" id="personHeight">
    <div class="title">
        <ul class="news-title">
            <li class="title-item active"><a href="javascript:;">个人信息修改</a></li>
            <li class="title-item"><a href="javascript:;">车辆信息</a></li>
            <li class="title-item"><a href="javascript:;">密码修改</a></li>
        </ul>
    </div>
    <div class="box-cont">
        <div class="act-forenotice">
            <!--个人信息-->
            <form class="layui-form" action="">
                <div class="formLeft">
                    <div class="layui-form-item">
                        <label class="layui-form-label widthSty">真实姓名:<br>(和身份证一致)</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别:</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="男" title="男" checked>
                            <input type="radio" name="sex" value="女" title="女">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label widthSty">出生日期:<br>(和身份证一致)</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="date" placeholder="yyyy-MM-dd" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">籍贯:</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入籍贯" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">政治面貌:</label>
                        <div class="layui-input-block">
                            <select name="city" lay-verify="required">
                                <option value=""></option>
                                <option value="0">群众</option>
                                <option value="1">团员</option>
                                <option value="2">党员</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">固定电话:</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的固定电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">移动电话:</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的移动电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">现住址:</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的现住址" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">工作单位:</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required  lay-verify="required" placeholder="请输入你的工作单位" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">职业:</label>
                        <div class="layui-input-block">
                            <select name="city" lay-verify="required">
                                <option value=""></option>
                                <option value="0">司机</option>
                                <option value="1">会计/金融</option>
                                <option value="2">工程师</option>
                                <option value="3">顾问</option>
                                <option value="4">计算机相关行业</option>
                                <option value="5">家庭主妇</option>
                                <option value="6">教育/培训</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">文化程度:</label>
                        <div class="layui-input-block">
                            <select name="city" lay-verify="required">
                                <option value=""></option>
                                <option value="0">小学</option>
                                <option value="1">初中</option>
                                <option value="2">高中</option>
                                <option value="3">大专</option>
                                <option value="4">本科</option>
                                <option value="5">硕士</option>
                                <option value="6">博士</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">工作学习经历:</label>
                        <div class="layui-input-block">
                            <textarea name="desc" placeholder="请输入您的工作学习经历" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">爱好及特长:</label>
                        <div class="layui-input-block">
                            <textarea name="desc" placeholder="请输入您的爱好及特长" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn btnWidth" lay-submit lay-filter="formDemo">提交个人信息</button>
                            <button type="reset" class="layui-btn btnWidth ordBtn">下载个人档案</button>
                        </div>
                    </div>
                </div>
                <div class="formRight">
                    <a href="javascript:;">
                        <div class="tpImg">
                            <img src="../img/upImg.png" class="upImg">
                        </div>
                        <div style="margin-top: 5px;">上传图片</div>
                    </a>
                </div>
                <div style="clear: both;"></div>
            </form>
        </div>
        <div class="act-forenotice hidden">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label cpIformation">车牌号:</label>
                    <div class="layui-input-block cpIformationBlock">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入您的车牌号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item bottomSty">
                    <label class="layui-form-label cpIformation">行驶证:</label>
                    <div class="layui-input-block cpIformationBlock">
                        <div class="positiveImg">
                            <a href="javascript:;">
                                <div class="topImg">
                                    <img src="../img/scImg.png">
                                </div>
                                <div>请上传行驶证（正面照）</div>
                            </a>
                        </div>
                        <div class="reverseImg">
                            <a href="javascript:;">
                                <div class="topImg">
                                    <img src="../img/scImg.png">
                                </div>
                                <div>请上传行驶证（反面照）</div>
                            </a>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block cpIformationBlock colorSty">
                        (信息上传审核通过后，不可更改)
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block qdsc">
                        <button class="layui-btn btnColor" lay-submit lay-filter="formDemo">确定上传</button>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </form>
        </div>
        <div class="act-forenotice hidden">
            <form class="layui-form mmxgBlock" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">旧密码:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入旧密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">新密码:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确定新密码:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入再次输入新密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item xgmaBlock">
                    <div class="layui-input-block">
                        <button class="layui-btn maxgBtn qdxg" lay-submit lay-filter="formDemo">确定修改</button>
                        <button class="layui-btn maxgBtn" lay-submit lay-filter="formDemo">取消修改</button>
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
<script type="text/javascript" src="../js/TweenMax.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script>
    $(function () {
        //上面按钮点击事件
        $('#personHeight .title-item').off("click").on("click",function(e){
            e.preventDefault();
            var _index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('#personHeight .box-cont .act-forenotice').eq(_index).removeClass("hidden").siblings().addClass("hidden");
            var height_con = $('#personHeight .box-cont .act-forenotice').eq(_index).height()+45;
            $(".personalRight", parent.document).height(height_con);
        });
    });
    //layui
    layui.use(['form','laydate'], function(){
        var form = layui.form
            ,laydate = layui.laydate;
        //时间选择
        laydate.render({
            elem: '#date'
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</html>